<template>
  <el-dialog
    :title="title"
    :visible.sync="Visible"
  >
    <el-form :model="ruleForm" :rules="rules"  ref="ruleForm" label-position="right"  label-width="100px" class="small-space">
      <el-row v-loading.body="listLoading">
        <el-col :span="15" :offset="2">
          <el-form-item label="名称" prop="title">
            <el-input v-model="ruleForm.title"></el-input>
          </el-form-item>
          <el-form-item  label="周期方式" prop="type">
            <el-radio class="radio" v-model="ruleForm.is_fixed_term" label="0">普通</el-radio>
            <el-radio class="radio" v-model="ruleForm.is_fixed_term" label="1">固定</el-radio>
          </el-form-item>
          <el-form-item  label="日期范围" prop="dateRange" v-if="ruleForm.is_fixed_term === '1'">
            <el-date-picker
              v-model="ruleForm.dateRange"
              type="daterange"
              align="right"
              placeholder="选择日期范围"
              :picker-options="pickerOptions2"
              @change="pickerChange"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item  label="周期" prop="ranger" v-if="ruleForm.is_fixed_term === '0' ">
            <el-input  v-model.number="ruleForm.range_num">
              <el-select v-model="ruleForm.range_unit" slot="append" style="width: 80px">
                <el-option label="天" value="day"></el-option>
                <el-option label="周" value="week"></el-option>
                <el-option label="月" value="month"></el-option>
                <el-option label="年" value="year"></el-option>
              </el-select>
            </el-input>
            <transition name="el-zoom-in-top">
              <div class="el-form-item__error" v-if="errors.range_num">{{errors.range_num ? errors.range_num[0] : ''}}</div>
            </transition>
          </el-form-item>

          <el-form-item  label="卡种类" prop="type">
            <el-select :disabled="ruleForm.is_publish" v-model="ruleForm.type" placeholder="请选择卡种">
              <el-option label="时间卡" value="date"></el-option>
              <el-option label="时段卡" value="clock"></el-option>
              <el-option label="次卡" value="times"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item  label="开始时间" v-if="ruleForm.type === 'clock'" prop="clock_start_time">
            <el-time-select
              placeholder="起始时间"
              v-model="ruleForm.clock_start_time"
              :picker-options="{ start: '08:30', step: '00:15', end: '22:30' }">
            </el-time-select>
          </el-form-item>
          <el-form-item  label="结束时间" v-if="ruleForm.type === 'clock'" prop="clock_end_time">
            <el-time-select
              placeholder="结束时间"
              v-model="ruleForm.clock_end_time"
              :picker-options="{ start: '08:30', step: '00:15', end: '22:30', minTime: ruleForm.clock_start_time }">
            </el-time-select>
          </el-form-item>

          <el-form-item label="次数" v-if="ruleForm.type === 'times'">
            <el-input-number v-model="ruleForm.times" :min="1"></el-input-number>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import _ from 'lodash'
import { Show, Update, Create } from '@/api/card'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String
    },
    editId: {}
  },
  data() {
    return {
      errors: {},
      listLoading: false,
      Visible: this.dialogVisible,
      loadTable: false, // 这是关闭对话框之后是否重新读列表的状态
      ruleForm: {
        title: '',
        start_date: '',
        end_date: '',
        clock_end_time: '',
        clock_start_time: '',
        type: 'date',
        times: '',
        dateRange: '',
        range_unit: 'day',
        range_num: '',
        is_fixed_term: '0'
      },
      rules: {
        title: [
          { required: true, message: '请输入卡名称' }
        ],
        type: [
          { required: true, message: '请选择卡种类' }
        ],
        clock_start_time: [
          { required: true, message: '请选择开始时间' }
        ],
        clock_end_time: [
          { required: true, message: '请选择结束时间' }
        ],
        dateRange: [
          { required: true, message: '请选择日期' }
        ]
      },
      pickerOptions2: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  watch: {
    dialogVisible() {
      if (this.dialogVisible) {
        this.loadTable = false
        this.Visible = this.dialogVisible
        this.resetForm('ruleForm')
        //          ↓ 打开的时候
        if (this.title === '编辑') {
          this.listLoading = true
          Show(this.editId).then((res) => {
            this.ruleForm.is_publish = res.data.is_publish
            this.ruleForm.title = res.data.title
            this.ruleForm.start_date = res.data.start_date
            this.ruleForm.end_date = res.data.end_date
            this.ruleForm.clock_end_time = res.data.clock_end_time
            this.ruleForm.clock_start_time = res.data.clock_start_time
            this.ruleForm.type = res.data.type
            this.ruleForm.times = res.data.times
            this.ruleForm.dateRange = [res.data.start_date, res.data.end_date]
            this.ruleForm.is_fixed_term = res.data.is_fixed_term ? '1' : '0'
            this.ruleForm.range_num = res.data.range_num
            this.ruleForm.range_unit = res.data.range_unit
            this.listLoading = false
          })
        } else {
          this.ruleForm.clock_end_time = ''
          this.ruleForm.clock_start_time = ''
          this.ruleForm.times = ''
        }
      }
    },
    Visible() {
      this.$emit('closeDialog', this.loadTable)
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.listLoading = true
          let data = {}
          if (this.ruleForm.is_fixed_term === '1') {
            if (this.ruleForm.type === 'date') {
              data = _.pick(this.ruleForm, ['is_fixed_term', 'title', 'start_date', 'end_date', 'type'])
            } else if (this.ruleForm.type === 'clock') {
              data = _.pick(this.ruleForm, ['is_fixed_term', 'title', 'start_date', 'end_date', 'type', 'clock_end_time', 'clock_start_time'])
            } else {
              data = _.pick(this.ruleForm, ['is_fixed_term', 'title', 'start_date', 'end_date', 'type', 'times'])
            }
          } else {
            if (this.ruleForm.type === 'date') {
              data = _.pick(this.ruleForm, ['is_fixed_term', 'title', 'range_unit', 'range_num', 'type'])
            } else if (this.ruleForm.type === 'clock') {
              data = _.pick(this.ruleForm, ['is_fixed_term', 'title', 'range_unit', 'range_num', 'type', 'clock_end_time', 'clock_start_time'])
            } else {
              data = _.pick(this.ruleForm, ['is_fixed_term', 'title', 'range_unit', 'range_num', 'type', 'times'])
            }
          }

          if (this.title === '编辑') {
            Update(this.editId, data).then(res => {
              this.listLoading = false
              this.dialogFormShow = false
              this.$message({ message: '保存成功', type: 'success' })
              this.resetForm('ruleForm') // 清空表单
              this.loadTable = true
              this.Visible = false // 关闭对话框
            }).catch((error) => {
              const { response } = error
              this.errors = response.data.errors
              this.listLoading = false
            })
          } else {
            Create(data).then(res => {
              this.listLoading = false
              this.dialogFormShow = false
              this.$message({ message: '保存成功', type: 'success' })
              this.resetForm('ruleForm')
              this.loadTable = true
              this.Visible = false
            }).catch((error) => {
              const { response } = error
              this.errors = response.data.errors
              this.listLoading = false
            })
          }
        }
      })
    },
    resetForm(formName) {
      this.$nextTick(() => {
        this.$refs[formName].resetFields()
      })
    },
    pickerChange(val) {
      this.ruleForm.start_date = val.slice(0, 11)
      this.ruleForm.end_date = val.slice(13, 24)
    }
  }
}
</script>
